<template lang="pug">
  .login__mod.login__mod--identidy
    h1.login__hd 验证信息
      router-link.login__hd__btn.btn.btn-outline-primary(to="/login") 登陆
    .identidy__step
      .identidy__step__item(:class="{active: $route.path == '/forget/identidy'}") 1
      .identidy__step__item(:class="{active: $route.path == '/forget/identidy/step2'}") 2
      .identidy__step__item(:class="{active: $route.path == '/forget/identidy/step3'}") 3
    router-view
</template>
<style lang="scss">
  .identidy__step {
    position: relative;
    margin: 90px 64px 85px;
    height: 46px;
    &:before {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
      background: $mainColor;
      z-index: -1;
      content: '';
    }
  }
  .identidy__step__item {
    position: absolute;
    top: 0;
    width: 46px;
    height: 46px;
    border: 1px solid $mainColor;
    border-radius: 6px;
    text-align: center;
    line-height: 44px;
    background: #fff;
    font-size: 24px;
    color: $mainColor;
    &:first-child {
      left: 0;
    }
    &:last-child {
      right: 0;
    }
    &:nth-child(2) {
      left: 50%;
      transform: translateX(-50%);
    }
    &.active {
      color: #fff;
      background: $mainColor;
    }
  }
</style>
<script>
export default {
}
</script>
